<div class="flex items-center gap-0 m:gap-4"
  data-controller="reaction"
  data-reaction-id-value="<%= vomit_reaction.id %>"
  data-reaction-url-value="<%= admin_reaction_path(vomit_reaction.id) %>">
  <div class="flex items-center w-100">
    <div class="flex items-center p-0 w-100 m:w-40">
      <div class="crayons-card crayons-card--secondary p-3 mr-3 m:mr-7" title="Flag">
        <%= crayons_icon_tag("twemoji/flag", native: true, width: 24, height: 24) %>
      </div>
      <div class="p-0">
        <p class="crayons-subtitle-3"><%= vomit_reaction.user.name %></p>
        <time datetime="<%= vomit_reaction.updated_at&.strftime("%Y-%m-%dT%H:%M:%S%z") %>" class="color-secondary fs-s shrink-0" title="<%= l(vomit_reaction.updated_at, format: :admin_user) if vomit_reaction.created_at %>">
          <%= l(vomit_reaction.updated_at, format: :long) %>
        </time>
      </div>
    </div>

    <%# Note: There are discrepancies in status naming between the frontend (FE) and backend (BE). %>
    <%# In the FE, 'Open/Unresolved' corresponds to 'valid' in the BE. This status appears when a trusted user flags an article, with a score of -50. %>
    <%# In the FE, 'Valid' corresponds to 'confirmed' in the BE. This status appears when an admin user flags an article or marks a trusted user-flagged article as valid, with a score of -100. %>
    <%# In both the FE and BE, 'Invalid' remains the same. This status appears when an admin user marks a flag or vomit reaction as invalid, with a score of 0. %>
    <div class="flex w-100 m:w-60 gap-0 m:gap-6 ml-2">
      <% if vomit_reaction.status == 'valid' %>
        <span class="c-indicator c-indicator--relaxed c-indicator--warning" title="<%= t("views.admin.shared.flags.open.title") %>">
          <%= t("views.admin.shared.flags.open.value") %>
        </span>
      <% elsif vomit_reaction.status == 'invalid' %>
        <span class="c-indicator c-indicator--relaxed" title="<%= t("views.admin.shared.flags.invalid.title") %>">
          <%= t("views.admin.shared.flags.invalid.value") %>
        </span>
      <% elsif vomit_reaction.status == 'confirmed' %>
        <span class="c-indicator c-indicator--relaxed c-indicator--danger" title="<%= t("views.admin.shared.flags.valid.title") %>">
          <%= t("views.admin.shared.flags.valid.value") %>
        </span>
      <% else %>
        <%# This case should never arise. %>
        <span class="c-indicator c-indicator--relaxed c-indicator--info" title="<%= t("views.admin.shared.flags.unidentified.title") %>">
          <%= t("views.admin.shared.flags.unidentified.value") %>
        </span>
      <% end %>

      <span
        data-testid="flag-score"
        class="crayons-card crayons-card--secondary px-3 py-1 ml-3 flex gap-2 items-center"
        title="<%= t("views.admin.#{text_section}.flags.score") %>">
        <%= crayons_icon_tag("analytics", native: true, width: 16, height: 16) %>
        <span class="fs-s fw-medium lh-base"><%= vomit_reaction.points %></span>
      </span>
    </div>
  </div>
  <%= render "admin/shared/flag_reaction_item_dropdown_menu", vomit_reaction: vomit_reaction %>
</div>
